﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/MyAccount.cshtml";
}
@using BI.CF.Model;
@{
    UserrsModel Umodel = Session["Umodel"] as UserrsModel;
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link href="~/Scripts/webuploader.css" rel="stylesheet" />
<link href="~/CES/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/webuploader.js"></script>
<style>
   .upload-state-done:after {
    content: "\✔";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}
</style>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <table>
        <tr>
            <th>
                <div id="thelist" class="uploader-list"></div>
            </th>
        </tr>
    </table>
   
    <table>
        <tr style="height:50px">
            <th>
                文件：
            </th>
            <th colspan="3">
                <div class="cp_img_jia" id="epicker">选择文件</div>
            </th>
        </tr>
        <tr style="height:40px">
            <th>金额：</th>
            <th colspan="3">
                <input type="text" id="PT_Money" name="PT_Money" />
            </th>
        </tr>
        <tr style="height:40px">
            <th>利率：</th>
            <th colspan="3">
                <input type="text" id="InterestRate" name="InterestRate" placeholder="%/年" />
            </th>
        </tr>
        <tr>
            <th>
                <input type="hidden" id="UserID" name="UserID" value="@Umodel.UserId" />
            </th>
            <th colspan="3">


                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </th>
        </tr>
    </table>
   
 
   
</div>
<script> 

    // 图片上传demo
    jQuery(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: false,

            // swf文件路径
            //swf: applicationPath + '/Script/Uploader.swf',

            // 文件接收服务端。
            server: '/Record/UpLoadProcess',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#epicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="cp_img">' +
                        '<img>' +
                        '<div class="cp_img_jian"></div>' +
                    '</div>'
                    ),
                $img = $li.find('img');

            $list.append($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).addClass('upload-state-done');

        });

        // 文件上传失败，现实上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单

        });

        //开始上传
        $("#ctlBtn").click(function () {
            uploader.option('formData', {

                UserID: $("#UserID").val(),
                InterestRate: $("#InterestRate").val(),
                PT_Money: $("#PT_Money").val()
            })
            uploader.upload();

        });

        //显示删除按钮
        $(".cp_img").live("mouseover", function () {
            $(this).children(".cp_img_jian").css('display', 'block');

        });
        //隐藏删除按钮
        $(".cp_img").live("mouseout", function () {
            $(this).children(".cp_img_jian").css('display', 'none');

        });
        //执行删除方法
        $list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            uploader.removeFile(uploader.getFile(Id, true));
            $(this).parent().remove();
        });
    });
</script>